<template>
  <div class="main">
    <!-- <el-button @click="printView">开始打印{{ title }}</el-button> -->
    <webview
      id="printWebview"
      ref="printWebview"
      :src="fullPath"
      nodeintegration
      webpreferences="contextIsolation=no"
      style="width: 80mm; visibility: hidden"
    />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const { ipcRenderer } = require("electron");
import QRCode from "qrcode";
const { exec } = require("child_process")

const props = defineProps(["title"]);
const printWebview = ref("");
const fullPath = ref("");
const printerName = ref("");
const printData = ref("");
const qrcodes = ref("");
var workerProcess
onMounted(() => {
  const text = "https://www.baidu.com"; // 要生成二维码的文本
  QRCode.toDataURL(text, { width: 200, hegiht:200 }).then((res) => {
    qrcodes.value = res;
  });

  fullPath.value =
    process.env.NODE_ENV === "development"
      ? `http://localhost:${process.env.PORT}/static/print.html`
      : `file://${__static}/print.html`;
  console.log(fullPath.value);
  const webview = printWebview.value;
  webview.addEventListener("ipc-message", (event) => {
    if (event.channel === "webview-print-do") {
      webview
        .print({
          silent: true, //静默打印
          printBackground: true,
          deviceName: printerName.value, //打印机名称
        })
        .then((res) => {})
        .catch((err) => {})
        .finally(() => {
          // this.messageBox.close();
        });
    }
  });
  getPrint();
});

function printView(data) {
  // let data = {
  //   payType:'微信',
  //   mchName:'夫妻煎饼夫妻煎饼夫妻煎饼',
  //   deviceInfo:'12345678945647',
  //   successTime:'2024-03-05 10:20:30',
  //   orderNo:'010120240305110057001199082Y',
  //   platformMchOrderNo:"20240305110113130166216169091815",
  //   money:'0.01'
  // }
  let orderNo1;
  let orderNo2;
  let platformMchOrderNo1;
  let platformMchOrderNo2;
  if (data.orderNo) {
    orderNo1 = data.orderNo.substring(0, 18);
    orderNo2 = data.orderNo.substring(18);
  }

  if (data.platformMchOrderNo) {
    platformMchOrderNo1 = data.platformMchOrderNo.substring(0, 18);
    platformMchOrderNo2 = data.platformMchOrderNo.substring(18);
  }
  const webview = printWebview.value;
  webview.send("webview-print-render", {
    printName: printerName.value,
    html: `<ul>
        <li class="title">${data.payType}-付款回执</li>
        <li>商户名称:${data.mchName}</li>
        <li>设备信息:12345678945647</li>
        <li>交易时间:${data.successTime}</li>
        <li>订单号:${orderNo1}</li>
        <li>${orderNo2}</li>
        <li>付款方式:${data.payType}</li>
        <li>流水号:${platformMchOrderNo1}</li>
        <li>${platformMchOrderNo2}</li>
        <li>---------------------------------</li>
        <li class='money'>订单总额:${data.money}</li>
        <li class='money'>用户实付:${data.money}</li>
        <li>---------------------------------</li>
        <li class='qrcode'><img src="${qrcodes.value}" alt="" /></li>
      </ul>`,
  });
  // <li class='money'>优惠金额:0</li>
  // <li><img src="${qrcodes.value}" alt="" /></li>
}
function getPrint() {
  ipcRenderer.send("allPrint");
  ipcRenderer.once("printName", (event, data, obj) => {
    printData.value = obj;
    console.log(data); //data就是返回的打印机数据列表
    data.forEach((item) => {
      if (item.isDefault) {
        printerName.value = item.name;
      }
    });
  });
}

defineExpose({
  printView,
});
</script>